﻿@{
    ViewBag.Title = "Simple jqGrid";
}
<h2>@ViewBag.Title</h2>
<link href="@Url.Content("~/Content/ui.jqgrid.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/smoothness/jquery-ui-1.8.17.custom.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/i18n/grid.locale-en.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.src.js")"type="text/javascript"></script>
<table id="list1">
</table>
<div id="pager1">
</div>
<script type="text/javascript">
    $(function ()
    {
        $("#list1").jqGrid(
        {
            url: '@ViewBag.Url',
            datatype: "json",
            colNames:
            [
                @Html.Raw(string.Join(",", ((string[])ViewBag.Columns).Select(s => "'" + s + "'")))
            ],
            colModel:
            [
                @Html.Raw(string.Join(",", ((string[])ViewBag.Columns).Select(s => string.Format("{{ name: '{0}', index: '{0}' }}", s))))
            ],
            rowNum: 20,
            pager: '#pager1',
            width: 800,
            height: 360,
            caption: "@ViewBag.Title"
        });

        $("#list1").jqGrid('navGrid', '#pager1', { edit: false, add: false, del: false });
    });
</script>
